<template>
    <addFileView ref="addFileView" />
    <addEditPanFoldersView ref="addEditPanFoldersView" />
    <addEditPanFiles ref="addEditPanFiles" />
    <panFoldersListView ref="panFoldersListView" />
    <el-main v-loading="loading">
      <div class="app-table">
        <div class="app-body">
          <div style="padding-bottom: 20px; padding-top: 10px">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item @click="goMain()">全部文件</el-breadcrumb-item>
              <el-breadcrumb-item v-for="(item, index) in items"
                ><a @click="getData(item.id, index)">{{
                  item.name
                }}</a></el-breadcrumb-item
              >
            </el-breadcrumb>
          </div>
          <el-table
            size="small"
            :data="list"
            style="width: 100%"
            :row-class-name="tableRowClassName"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="name" label="文件名">
              <template #default="scope">
                <div style="display: flex">
                  <el-image
                    :src="iconImage"
                    v-if="getFileType(scope.row) == 'image'"
                    style="width: 40px; padding: 7px"
                  ></el-image>
                  <el-image
                    :src="iconWord"
                    v-else-if="getFileType(scope.row) == 'word'"
                    style="width: 40px; padding: 7px"
                  ></el-image>
                  <el-image
                    :src="iconPdf"
                    v-else-if="getFileType(scope.row) == 'pdf'"
                    style="width: 40px; padding: 7px"
                  ></el-image>
                  <el-image
                    :src="iconExcel"
                    v-else-if="getFileType(scope.row) == 'excel'"
                    style="width: 40px; padding: 7px"
                  ></el-image>
                  <el-image
                    :src="iconZip"
                    v-else-if="getFileType(scope.row) == 'zip'"
                    style="width: 40px; padding: 7px"
                  ></el-image>
                  <el-image
                    :src="iconRar"
                    v-else-if="getFileType(scope.row) == 'rar'"
                    style="width: 40px; padding: 7px"
                  ></el-image>
                  <el-image
                    :src="iconPpt"
                    v-else-if="getFileType(scope.row) == 'ppt'"
                    style="width: 40px; padding: 7px"
                  ></el-image>
  
                  <el-image
                    :src="iconFile"
                    v-else-if="scope.row.fileSize"
                    style="width: 40px; padding: 7px"
                  ></el-image>
  
                  <!-- <el-image :src="icon2"  v-else-if="scope.row.type==2" style="width: 40px;padding: 5px;"></el-image> -->
                  <!-- <el-image :src="icon2"  v-else-if="scope.row.type==3" style="width: 40px;padding: 5px;"></el-image> -->
  
                  <el-image
                    :src="iconFolder"
                    v-else
                    style="width: 40px; padding: 5px"
                  ></el-image>
  
                  <span style="line-height: 40px; margin-left: 10px">{{
                    scope.row.name
                  }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="fileSize" label="大小" width="120">
              <template #default="scope">
                {{ scope.row.fileSize ? convertSize(scope.row.fileSize) : "-" }}
              </template>
            </el-table-column>
            <el-table-column prop="sharedTime" label="共享时间" width="160" />
            <el-table-column label="操作" width="180">
              <template #default="scope">
              
                <el-button
                  size="small"
                  type="danger"
                  plain
                  @click="realDeletePanFiles(scope.row)"
                  >取消共享
                </el-button>
              </template>
            </el-table-column>
            <template v-slot:empty>
              <el-empty description="暂无数据"></el-empty>
            </template>
          </el-table>
        </div>
      </div>
    </el-main>
  
    <div class="app-table" style="padding-left: 0px" v-show="showRight">
      <div class="app-body right-list">
        <addEditPanFilesView ref="addEditPanFilesView" />
      </div>
    </div>
  </template>
  <script>
  import addEditPanFilesView from "@/components/pan/addPanFileRightView.vue";
  import addEditPanFoldersView from "@/components/pan/addEditPanFolders.vue";
  import addEditPanFiles from "@/components/pan/addEditPanFiles.vue";
  import panFoldersListView from "@/views/pan/PanFoldersListView.vue";
  import axios from "axios";
  
  import addFileView from "@/components/addExcelFile.vue";
  import { ElConfigProvider, ElMessageBox, ElMessage } from "element-plus";
  import zhCn from "element-plus/lib/locale/lang/zh-cn";
  import { httpService } from "@/utils/httpService";
  import {
    Picture as IconPicture,
    Upload,
    Files,
    // dropdown,
    ArrowDown,
    Folder,
  } from "@element-plus/icons-vue";
  
  export default {
    name: "PanFilesListView",
    data() {
      return {
        iconFolder: require("@/assets/folder.png"),
        iconImage: require("@/assets/image.png"),
        iconFile: require("@/assets/file-file.png"),
        iconWord: require("@/assets/word.png"),
        iconPdf: require("@/assets/pdf.png"),
        iconExcel: require("@/assets/excel.png"),
        iconZip: require("@/assets/zip.png"),
        iconRar: require("@/assets/zip.png"),
        iconPpt: require("@/assets/ppt.png"),
        type: 0,
        loading:false,
        items: [],
        title: "",
        page: 0,
        pageSize: 10,
        total: 0,
        limit: 10,
        showRight: false,
        list: [],
        form: {
          name: "",
          teacherNumber: "",
        },
        files: [
          { id: 1, size: 1024 }, // 1 KB
          { id: 2, size: 1048576 }, // 1 MB
          { id: 3, size: 1073741824 }, // 1 GB
          { id: 4, size: 1099511627776 }, // 1 TB
        ],
        isEffect: "",
        type: "",
        level: 1,
        folderId: 0,
      };
    },
    components: {
      httpService,
      panFoldersListView,
      addEditPanFiles,
      addEditPanFilesView,
      addEditPanFoldersView,
      addFileView,
      IconPicture,
      ElConfigProvider,
      ElMessageBox,
      ElMessage,
      Upload,
      Folder,
      Files,
      // dropdown,
      ArrowDown,
    },
    setup() {
      return {
        locale: zhCn,
      };
    },
    mounted() {
      if (this.$route.query.ef) {
        this.isEffect = this.$route.query.ef;
      }
      console.log(this.$route.query);
      if (this.$route.query.type) {
        this.type = this.$route.query.type;
      } else {
        this.type = "";
      }
      this.getPanFilesList();
    },
    watch: {
      $route() {
        this.folderId = 0;
        this.items = [];
        if (this.$route.query.ef) {
          this.isEffect = this.$route.query.ef;
        }
        console.log(this.$route.query);
        if (this.$route.query.type) {
          this.type = this.$route.query.type;
        } else {
          this.type = "";
        }
        this.getPanFilesList();
      },
    },
    methods: {
      downLoadPanFiles(row) {
        this.loading = true;
        //添加进度条
        if (typeof row.parentFolderId === "undefined") {
          axios({
            url: "/javaApi/panFiles/download/" + row.id,
            method: "GET",
            responseType: "blob", // Set the response type to 'blob' to handle binary data
          })
            .then((response) => {
              const url = window.URL.createObjectURL(new Blob([response]));
              const link = document.createElement("a");
              link.href = url;
              link.setAttribute("download", row.name); // Set the desired file name
              document.body.appendChild(link);
              link.click();
              this.loading = false;
  
            })
            .catch((error) => {
              console.error(error);
              this.loading = false;
  
            });
        } else {
          axios({
            url: "/javaApi/panFolders/download/" + row.id,
            method: "GET",
            responseType: "blob", // Set the response type to 'blob' to handle binary data
          })
            .then((response) => {
              if (response.size<=64) {
                 ElMessage.error("当前文件夹总文件过大，请单独进行下载。");
              } else {
                const url = window.URL.createObjectURL(new Blob([response]));
                const link = document.createElement("a");
                link.href = url;
                link.setAttribute("download", row.name + ".zip"); // Set the desired file name
                document.body.appendChild(link);
                link.click();
              }
              this.loading = false;
            })
            .catch((error) => {
              console.error(error);
              this.loading = false;
  
            });
        }
      },
      getFileType(row) {
        if (row.name) {
          const extension = row.name.split(".").pop().toLowerCase();
          const fileTypes = {
            jpg: "image",
            jpeg: "image",
            png: "image",
            gif: "image",
            bmp: "image",
            tiff: "image",
            doc: "word",
            docx: "word",
            pdf: "pdf",
            xls: "excel",
            xlsx: "excel",
            zip: "zip",
            rar: "rar",
            ppt: "ppt",
            pptx: "ppt",
          };
  
          return fileTypes[extension] || "other";
        } else {
          return "other";
        }
      },
      copyTo(row, flag) {
        if (flag == 1) {
          this.$refs.panFoldersListView.title = "复制到";
        } else {
          this.$refs.panFoldersListView.title = "移动到";
        }
        this.$refs.panFoldersListView.getPanFoldersList();
        this.$refs.panFoldersListView.row = row;
        this.$refs.panFoldersListView.flag = flag;
        this.$refs.panFoldersListView.dialogFormVisible = true;
      },
      goMain() {
        this.folderId = 0;
        this.items = [];
        this.getPanFilesList();
      },
      getData(folderId, index) {
        this.folderId = folderId;
        this.items.splice(index + 1); // Remove the last element
        this.getPanFilesList();
      },
      clickRow(row, l, e) {
        console.log(l);
        console.log(e);
        if (this.isEffect == 0) {
          if (!row.folderId) {
            const isObjectIncluded = this.items.includes(row);
            if (!isObjectIncluded) {
              if (this.level == 1) {
                this.items = [];
                this.items.push(row);
                this.level = this.level + 1;
              } else {
                this.items.push(row);
                this.level = this.level + 1;
              }
            }
            this.folderId = row.id;
            this.getPanFilesList();
          }
        }
      },
      convertSize(bytes) {
        const k = 1024;
        const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
        if (bytes === 0) return "0 Bytes";
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        if (i < 1) {
          return bytes + " " + sizes[i];
        }
        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
      },
      onFileChange(file, files) {
        this.showRight = true;
        this.$refs.addEditPanFilesView.folderId = this.folderId;
        this.$refs.addEditPanFilesView.uploadIndex = 0;
        this.$refs.addEditPanFilesView.onFileChange(file, files);
      },
      closeRight() {
        this.showRight = false;
      },
      clearFiles() {
        this.$refs.fileInput.clearFiles();
      },
  
      searchEnter: function (e) {
        // 使用 which 和 keyCode 属性来解决兼容问题
        var keyCode = window.event ? e.keyCode : e.which;
        var val = e.target.value;
        if (keyCode == 13 && val) {
          this.getPanFilesList();
        }
      },
      addPanFolders() {
        this.$refs.addEditPanFoldersView.title = "新建文件夹";
        this.$refs.addEditPanFoldersView.addPanFoldersForm.parentFolderId =
          this.folderId;
        this.$refs.addEditPanFoldersView.dialogFormVisible = true;
      },
      add() {
        this.$refs.addEditPanFilesView.title = "添加文件";
        this.$refs.addEditPanFilesView.dialogFormVisible = true;
      },
      editPanFiles(obj) {
        this.$refs.addEditPanFilesView.title = "修改信息";
        this.$refs.addEditPanFilesView.getPanFilesById(obj.id);
        this.$refs.addEditPanFilesView.dialogFormVisible = true;
      },
      edit(obj) {
        if (obj.folderId || obj.folderId === 0) {
          this.$refs.addEditPanFiles.title = "重命名";
          this.$refs.addEditPanFiles.getPanFilesById(obj.id);
          this.$refs.addEditPanFiles.dialogFormVisible = true;
        } else {
          this.$refs.addEditPanFoldersView.title = "重命名";
          this.$refs.addEditPanFoldersView.getPanFoldersById(obj.id);
          this.$refs.addEditPanFoldersView.dialogFormVisible = true;
        }
      },
      share(obj){
        ElMessageBox.confirm("确定要共享文件/文件夹吗？", "提醒", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            if (obj.folderId || obj.folderId == 0) {
              httpService(
                "/javaApi/panFiles/share",
                "id=" + obj.id,
                "post"
              ).then((data) => {
                if (data.code == 200) {
                  ElMessage.success(data.message);
                } else {
                  ElMessage.error(data.message);
                }
              });
            } else {
              httpService(
                "/javaApi/panFolders/share",
                "id=" + obj.id,
                "post"
              ).then((data) => {
                if (data.code == 200) {
                  ElMessage.success(data.message);
                } else {
                  ElMessage.error(data.message);
                }
              });
            }
          })
          .catch(() => {});
      },
      realDeletePanFiles(obj) {
        ElMessageBox.confirm("确定要取消共享文件/文件夹吗？", "提醒", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
              httpService(
                "/javaApi/panFileShares/deleteById",
                "id=" + obj.sharedId,
                "post"
              ).then((data) => {
                if (data.code == 200) {
                  ElMessage.success("已取消共享");
                  this.getPanFilesList();
                } else {
                  ElMessage.error("取消共享失败");
                }
              });
          })
          .catch(() => {});
      },
      recoverPanFiles(obj) {
        ElMessageBox.confirm("确定要恢复吗？", "提醒", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            if (obj.folderId || obj.folderId == 0) {
              httpService(
                "/javaApi/panFiles/edit",
                "id=" + obj.id + "&isEffect=0",
                "post"
              ).then((data) => {
                if (data.code == 200) {
                  ElMessage.success(data.message);
                  this.getPanFilesList();
                } else {
                  ElMessage.error(data.message);
                }
              });
            } else {
              httpService(
                "/javaApi/panFolders/edit",
                "id=" + obj.id + "&isEffect=0",
                "post"
              ).then((data) => {
                if (data.code == 200) {
                  ElMessage.success(data.message);
                  this.getPanFilesList();
                } else {
                  ElMessage.error(data.message);
                }
              });
            }
          })
          .catch(() => {});
      },
      deletePanFiles(obj) {
        ElMessageBox.confirm("确定要加入回收站吗？", "提醒", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            alert(obj.folderId);
            if (obj.folderId || obj.folderId == 0) {
              httpService(
                "/javaApi/panFiles/edit",
                "id=" + obj.id + "&isEffect=1",
                "post"
              ).then((data) => {
                if (data.code == 200) {
                  ElMessage.success(data.message);
                  this.getPanFilesList();
                } else {
                  ElMessage.error(data.message);
                }
              });
            } else {
              httpService(
                "/javaApi/panFolders/deleteByIdLogic",
                "id=" + obj.id + "&isEffect=1",
                "post"
              ).then((data) => {
                if (data.code == 200) {
                  ElMessage.success(data.message);
                  this.getPanFilesList();
                } else {
                  ElMessage.error(data.message);
                }
              });
            }
          })
          .catch(() => {});
      },
      reloadData() {
        this.page = 1;
        this.getPanFilesList();
      },
      importExcel() {
        this.$refs.addFileView.dialogFormVisible = true;
        this.$refs.addFileView.title = "批量导入文件表";
        this.$refs.addFileView.uploadApiUrl = "/javaApi/panFiles/importExcel";
      },
      exportExcel() {
        httpService(
          "/javaApi/panFiles/exportExcel",
          {
            name: this.form.name,
            teacherNumber: this.form.teacherNumber,
          },
          "get"
        ).then((data) => {
          if (data.code == 200) {
            window.open(data.message, "_blank");
          }
        });
      },
      onSubmit() {
        this.getPanFilesList();
      },
      // 每页记录数改变，size：回调参数，表示当前选中的“每页条数”
      changePageSize(size) {
        this.pageSize = size;
        this.limit = size;
        this.getPanFilesList();
      },
  
      // 改变页码，page：回调参数，表示当前选中的“页码”
      changeCurrentPage(page) {
        this.page = page;
        this.getPanFilesList();
      },
      tableRowClassName({ row, rowIndex }) {
        return "";
      },
      getPanFilesList() {
        httpService(
          "/javaApi/panFileShares/listAllMyShare",
          {
            name: this.form.name,
            teacherNumber: this.form.teacherNumber,
            isEffect: this.isEffect,
            type: this.type,
            folderId: this.folderId,
          },
          "get"
        ).then((data) => {
          this.list = data.object.panFolders;
          this.list = this.list.concat(data.object.panFiles);
          console.log(this.list);
        });
      },
    },
  };
  </script>
  <style scoped>
  .el-main {
    padding: 0px;
    text-align: left;
  }
  
  .right-list {
    width: 360px;
    background: white;
  }
  
  .teacher-content {
    width: 100%;
  }
  
  .app-table {
    background: #eff3f5;
    padding: 10px;
  }
  
  .app-separator {
    padding-top: 10px;
    padding-bottom: 20px;
    padding-left: 10px;
  }
  
  .app-body {
    background: white;
    padding: 20px 20px 10px 20px;
    margin-bottom: 10px;
    min-height: calc(100vh - 120px);
  }
  
  .el-table .warning-row {
    --el-table-tr-bg-color: var(--el-color-warning-lighter);
  }
  
  .el-table .success-row {
    --el-table-tr-bg-color: var(--el-color-success-lighter);
  }
  
  .el-pagination {
    text-align: center;
    margin-top: 10px;
  }
  
  .el-breadcrumb__item {
    float: left;
    display: flex;
    padding: 5px 0px;
    align-items: center;
  }
  </style>
  
  